Pixels of the Week – March 16, 2018
Every week I post a lot of my daily readings about Web, UI and UX Design, mobile design, webdesign tools and useful resources, inspiration on twitter and other social networks.
This week’s selection: icon design tips, font ninja’s new font tool, iOS’s notifications redesigned, an online tool to create and collaborate on visual boards, design systems, accessibility for designers, CSS grid layout, form design, CSS tips and tricks, navigating the complexity of change aversion for users, microcropy for UX teams, how to annoy your designer, CSS font-face explained, a tool in beta to help you building User flows and a CSS gradient tool.
You can follow me on twitter to get a dose of links every days.
TL;DNR the one you should not miss
#Icon
Hopefully, the Ultimate Guide to a Flat Icon Set – You will need to bookmark this one: a super detailed article on how to create flat crisp icons
Interesting article
#UX/UI
- Interesting example of a quick guerrilla user research process with usability testing
- A few tips to help you create user friendly forms. Those are the basics, form design can get way more complex than that, especially when you have to enter a lot of data in big enterprise dashboards
- Navigating the complexity of change aversion, a great read on shipping a big redesign to users
- Great tips: A 6-point microcopy checklist for product teams without UX writers
At least it’s succinct… - An Exploration of Visual Indicators IRL – really fun and inspired article
#Design
- “Designing a better notification experience for iOS” it’s strange to see that for once, Android has a better experience when it comes to notifications than iOS
- Why design systems are a single point of failure (and how to improve this when the product grows)
#Accessibility
- “A DIY Web Accessibility Blueprint“, nice to see how accessibility is the responsibility of every profile in the team, not just devs.
- A Primer to Web Accessibility for Designers, because accessibility is also part of the designer’s responsibly
#Front-End
- Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses
- CSS Grid One Year On by @rachelandrew
- Lesser known CSS quirks & advanced tips – If you are starting to learn #CSS, here are a few CSS quirks & advanced tips you really need to be aware of
- Get to Know The Lobotomized Owl Selector
Inspiration, fun demos and Great ideas
#Stupid and fun
So, it’s almost Friday, here are 25 things you can say to annoy designers. Raise your hand if at least one of those happened to you this week
Webdesign news
#Sketch
Sketch 49: Find and Replace colors everywhere! YES YES YES <3
Tutorials
#Typography #CSS
“Three Techniques for Performant Custom Fonts Usage” be careful when reducing subsetting if you let user enter information (comments, registration, etc.) just because you don’t need those characters, doesn’t necessary mean other people won’t
Useful resources, tools and plugins that will make your life easy
#Font
FontFace Dojo, a new tool by FontFaceNinja that let’s you bookmark fonts and helps you with the font pairing by providing nice examples
#Collaboration
milanote.com, an online tool to create and collaborate on visual boards
#Wikipedia
A browser plugin and app to modernize Wikipedia’s reading experience: wikiwand.com
#CSS
A nice little CSS Gradient Generator
#User Flow
Overflow, a tool in beta to help you building User flows. What tools are you currently using? I do it in Sketch but handling arrows is messy :/
